<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					label="账变时间"
					class="flex-row-container"
					label-width="77px"
				>
					<el-date-picker
						v-model="queryData.billEndDate"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						clearable
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>

				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				v-bind="$attrs"
				v-on="$listeners"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item, index) in newCol"
					:key="'column_' + index"
					:prop="newCol[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>
					<template slot="header">
						<span v-if="item.itemTipContent">
							{{ item.label }}
							<el-tooltip
								class="item"
								effect="dark"
								:content="item.itemTipContent"
								placement="top-start"
							>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
						<span v-else>
							{{ item.label }}
						</span>
					</template>
					<template slot-scope="{ row, $index }">
						<template v-if="item.slot === 'serialNumber'">
							{{ $index + 1 }}
						</template>
						<div v-if="item.solt === 'numberSolt'">
							<span
								:style="
									handleNumberColor(row[newCol[index].prop])
								"
							>
								{{
									handleNumber(
										'USDT',
										row[newCol[index].prop],
										2,
										true,
										true
									)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'noColorNumberSolt'">
							<span>
								{{
									handleNumber(
										'USDT',
										row[newCol[index].prop]
									)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'accountStatusSolt'">
							<span
								v-if="row.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="row.gameLockStatus === 1"
								class="lockingRgba"
							>
								{{ $t('common.game_lock_status') }}
							</span>
							<span
								v-if="row.accountLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
							<span
								v-if="
									row.loginLockStatus === 0 &&
									row.gameLockStatus === 0 &&
									row.accountLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</div>
						<div v-if="item.solt === 'billStatusSolt'">
							<span
								v-if="row[newCol[index].prop] == 0"
								style="color: red"
							>
								无注单
							</span>
							<span v-else>-</span>
						</div>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ row[newCol[index].prop] || '-' }}
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" @click="clickDel">复原缺省</el-link>
			</div>
			<div
				v-for="(value, columnName) in activityListField"
				:key="columnName"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[columnName]">
					{{ columnName }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
const startTime = () =>
  dayjs()
    .startOf('day')
    .valueOf()
const endTime = () =>
  dayjs()
    .endOf('day')
    .valueOf()

export default {
  components: {
    MainContent
  },
  mixins: [list],
  data() {
    return {
      dayjs,
      tableHeight: 480,
      otherDependenComponents: [],
      queryData: {
        billEndDate: [startTime(), endTime()]
      },
      colSettings: {
        visible: false
      },
      tableData: [],
      subSummary: {},
      totalSummary: {},
      billDateList: [],
      loading: false,
      exportBtnLoading: false,
      activityListField: {},
      childrenAjaxData: ''
    }
  },
  computed: {
    newCol() {
      return this.oldCol.map(item => {
        item.isShow = this.activityListField[item.label]
        return item
      }).filter(item => item.isShow)
    }
  },
  created() {
    this.oldCol = getColumns()
    this.oldCol.map(item => {
      this.activityListField[item.label] = item.isShow
    })
    this.initIndexDB('bettingReconciliationAbnormalAccountChanges', this.activityListField)
  },
  methods: {
    forceUpdate(value) {
      this.$forceUpdate()
      this.queryData.searchMemberName = this.queryData.searchMemberName.replace(
        /[^A-Za-z0-9]/g,
        ''
      )
    },

    loadData() {
      const [startTime, endTime] = this.queryData.billEndDate

      const params = {
        billAtStart: startTime
          ? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
          : '',
        billAtEnd: endTime
          ? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
          : '',
        ...this.getParams()
      }
      this.loading = true
      this.$api
        .venueAbnormalBillListPage(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.tableData = []
            this.tableData = res?.data?.record || []
            this.total = res?.data?.totalRecord || 0
            this.subSummary = res?.data?.summary || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    reset() {
      this.pageNum = 1
      this.queryData = {
        billEndDate: [startTime(), endTime()]
      }
      this.loadData()
    },
    handleExportExcel() {
      const [startTime, endTime] = this.queryData.billEndDate
      const params = {
        billAtStart: startTime
          ? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
          : '',
        billAtEnd: endTime
          ? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
          : '',
        ...this.getParams()
      }
      delete params.pageNum
      delete params.pageSize
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'venueAbnormalBillListExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      this.updateIndexDB()
      this.activityListField = this.dialogColumnData
    },
    // 打开列设置弹框
    openColSettings() {
      this.getIndexDB(this.activityListField)
      this.colSettings.visible = true
    },
    // 复原缺省
    clickDel() {
      this.oldCol.map(item => {
        this.dialogColumnData[item.label] = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.input-with-select {
	width: 110px;
}
.ptop {
	padding-top: 2px;
	margin-left: 10px;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
</style>
